import React, { useEffect, useState } from 'react'
import { observer } from 'mobx-react'

import SvgIcon from '../../common/svg-icon'
import video from '../../../store/video'
import scss from './video-type.module.scss'

const VideoType = () => {
  const [isLive, setIsLive] = useState(false)
  // const videoStore = useStore('video')

  function handleClick() {
    setIsLive(!isLive)
  }

  useEffect(() => {
    video.setVideoType(isLive ? 'live' : 'record')
  }, [isLive])

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      <div style={{ display: isLive ? 'none' : 'block' }}>
        <SvgIcon icon="#iconrecord" />
      </div>
      <span style={{ display: isLive ? 'block' : 'none' }} className={scss.label}>
        LIVE
      </span>
    </div>
  )
}

export default observer(VideoType)
